<template>
  <div class="device-info">
    <InfoCard :title="title">
      <template #right>
        <div>
          <span class="device-info__right" @click="showField">搜索</span>
          <span @click="startScan">扫描</span>
        </div>
      </template>
      <template v-slot:content>
        <van-loading color="#547ffb" type="spinner" vertical v-if="loading" class="device-info__loading">
          数据加载中...
        </van-loading>
        <div class="device-info__content" v-if="!loading && equipment.siteName">
          <div class="device-info__text">
            <div class="device-info__item">
              <p class="device-info__label">设备路径</p>
              <p class="device-info__value">{{ equipment.siteName }}</p>
            </div>
            <div class="device-info__item">
              <p class="device-info__label">设备名称</p>
              <p :class="fullPathClass">{{ equipment.fullPath }}</p>
            </div>
            <div
              :class="['device-info__arrow', isExpanded ? 'device-info__arrow--expanded' : 'device-info__arrow--collapsed']"
              @click="handleToggle">
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
        <div class="device-info__content" v-if="!loading && !equipment.siteName">
          <p class="device-info__text">请点击右上角关联设备</p>
        </div>
      </template>
    </InfoCard>
    <!-- <Dialog theme="round-button" v-model="show" title="填写" @confirm="handleConfirm" show-cancel-button>
      <Field v-model="value" :label="label" :placeholder="placeholder" :border="true" />
    </Dialog> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import InfoCard from '@/components/info-card';
import { startScan, handleScanResult } from '@/modules/scanner';
import { Toast, Field } from 'vant';
import { log, isDevelopment } from '@/utils';
import Dialog from '@/components/dialog';

@Component({
  name: 'DeviceInfo',
  components: {
    InfoCard,
    Dialog,
    Field,
  }
})
export default class DeviceInfo extends Vue {
  private title = '检测设备';
  private loading = false;
  // private show = false;
  private get tester() {
    return this.$store.state.tester;
  }
  // private placeholder = '请输入设备编码';
  // private value = '';
  // private label = '设备编码'
  private isExpanded = false;

  private get fullPathClass() {
    return {
      'device-info__value': true,
      'device-info__value--less': !this.isExpanded,
      'van-ellipsis': !this.isExpanded
    }
  }

  get equipment() {
    return this.$store.state.equipment;
  }

  private startScan() {
    startScan().then(result => {
      this.loading = true;
      return queryDevice({ capitalAssetsCode: result as string });
      // return handleScanResult(result as string)
    }).then(equipment => {
      log('扫描结果:', equipment);
      this.$store.dispatch('setEquipment', equipment);
      this.loading = false;
    }).catch(err => {
      this.loading = false;
      Toast.fail(err);
    });
  }

  // handleConfirm() {
  //   this.show = false;
  //   this.loading = true;
  //   queryDevice({ deviceCode: this.value }).then((equipment) => {
  //     log('扫描结果:', equipment);
  //     this.$store.dispatch('setEquipment', equipment);
  //     this.loading = false;
  //   }).catch(err => {
  //     this.loading = false;
  //     Toast.fail(err);
  //   })
  // }

  showField() {
    // this.show = true;
    this.$router.push({ name: 'SearchStation' });
  }

  handleToggle() {
    this.isExpanded = !this.isExpanded;
  }
}
</script>

<style scoped lang="scss">
.device-info {
  margin: 8px;
  color: #333;
  font-size: 14px;
  line-height: 26px;

  &__content {
    position: relative;
    padding: 8px 12px;
  }

  &__loading {
    padding: 8px 0;
  }

  &__text {
    padding: 0 8px;
  }

  &__item {
    display: flex;
    justify-content: flex-start;
  }

  &__label {
    flex-basis: 60px;
    text-align: justify;
    text-align-last: justify;
    min-width: 60px;
  }

  &__arrow {
    text-align: center;

    &--expanded {
      transform: rotate(-90deg) translateZ(0);
      transition: transform 0.3s;
    }

    &--collapsed {
      transform: rotate(90deg) translateZ(0);
      transition: transform 0.3s;
    }
  }

  &__value {
    flex-grow: 1;
    color: #666;
    margin-left: 20px;

    &--select {
      color: $primary-color;
    }

    &--less {
      white-space: nowrap;
    }

    &--more {
      white-space: normal;
    }
  }

  &__right {
    margin-right: 8px;
  }

}
</style>
